<template>
  <div>
    <div class="commentBox">
      <span class="left">
        <img src="../../static/img/defaultAvatar.png" />
      </span>
      <span class="right">
        <textarea
          id="textpanel"
          class="textArea"
          placeholder="既然来了，那就留下些什么吧~"
          v-model="value"
          @input="vaildCount"
        ></textarea>
      </span>
    </div>
    <div class="bottom">
      <el-button class="submit p2" type="primary" @click="handleSubmit()">发送评论</el-button>
      <el-button class="cancel p2" type="info" @click="handleCancle()">取消评论</el-button>
      <div class="emoji-panel-btn p2">
        <img src="../../static/img/face_logo.png" />
      </div>
      <span class="allow p2">还能输入{{count}}个字符</span>
    </div>
  </div>
</template>

<script>
import {getCreateTime} from '../util/dateUtil.js'
export default {
  data() {
    return {
      value: "",
      count: 1024,
      comments: []
    };
  },
  methods: {
    vaildCount() {
      var count = 1024 - this.value.length;
      if (count <= 0) {
        this.count = 0;
      } else {
        this.count = count;
      }
    },
    handleSubmit() {
      let session = window.localStorage;
      let login = JSON.parse(session.getItem("login"));
      if (login == null) {
        this.$message.error("登录后才可以进行评论");
      }else{
        if(this.value==""){
          this.$message.error("评论内容不可以为空");
        }else{
          let comments
          let uid=1
          if(session.getItem("comments")==null){
            comments=[]
          }else{
            comments=JSON.parse(session.getItem("comments"))
            uid=parseInt(comments[comments.length-1].uid)+1
          }
          let comment={
            uid,
            content:this.value,
            createTime:getCreateTime(),
            replyList:[],
            source:"about",
            user:login,
          }
          comments.push(comment)
          session.setItem("comments",JSON.stringify(comments))
          this.$message.success("发表评论成功")
          this.comments=comments
        }
      }
    },
    handleCancle() {}
  }
};
</script>

<style>
.commentBox {
  min-width: 700px;
  width: 100%;
  height: 100px;
  margin: 0 auto;
}
.commentBox .left {
  display: inline-block;
  width: 4%;
  height: 100%;
  padding-top: 3px;
}
.commentBox .left img {
  cursor: pointer;
  margin: 0 auto;
  width: 90%;
  border-radius: 50%;
}
.commentBox .right {
  display: inline-block;
  margin: 5px 2px 0 0;
  width: 95%;
  height: 100%;
}
textarea::-webkit-input-placeholder {
  color: #909399;
}
.commentBox .right textarea {
  color: #606266;
  padding: 10px 5px 5px 10px;
  resize: none;
  width: 95%;
  height: 100%;
}
.bottom {
  position: relative;
  min-width: 690px;
  width: 98%;
  height: 60px;
  line-height: 40px;
  margin-top: 20px;
}
.bottom .p2 {
  float: right;
  margin-top: 5px;
  margin-right: 10px;
}
.emoji-panel-btn img {
  height: 35px;
  width: 35px;
}
.emoji-panel-btn:hover {
  cursor: pointer;
  opacity: 0.8;
}
</style>